<template>
  <div class="shop" v-if="shopInfo">
    <nav class="header-nav">
      <div class="nav_bg">
        <img
          src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3552271047,34058889&fm=26&gp=0.jpg"
          alt=""
        />
      </div>
      <div class="nav_back">
        <i class="fa fa-chevron-left" @click="$router.push('/home')"></i>
      </div>
      <div class="shop_image">
        <img
          src="https://elm-api.caibowen.net/116d72b960f4acad6f8affb94b2c4png.png"
          alt=""
        />
      </div>
    </nav>
    <div class="index-rst" v-if="shopData">
      <div class="rst-name">
        <span @click="showInfoModel = true">{{ shopData.name }}</span>
        <i class="fa fa-caret-right"></i>
      </div>
      <InfoModel
        :rst="shopData"
        v-if="shopData"
        :showInfoModel="showInfoModel"
        @close="showInfoModel = false"
      ></InfoModel>
      <div class="rst-order">
        <span>评分{{ shopData.rating }}</span>
        <span>月售{{ shopData.recent_order_num }}</span>
        <span>蜂鸟专送约{{ shopData.order_lead_time }}</span>
      </div>
      <Activity v-if="shopData" :activities="shopData.activities"></Activity>
      <p class="rst-promotion">公告：{{ shopData.promotion_info }}</p>
    </div>
    <NavBar> </NavBar>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>
<script>
import InfoModel from "../../components/Shops/InfoModel";
import Activity from "../../components/Shops/Activity";
import NavBar from "../../components/Shops/NavBar";
export default {
  name: "Shop",
  data() {
    return {
      shopInfo: null,
      shopData: null,
      showInfoModel: false,
    };
  },
  components: {
    InfoModel,
    Activity,
    NavBar,
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios("/goods").then((res) => {
        this.shopInfo = res.data.data;
      });
      this.$axios("/eleapi").then((res) => {
        this.shopData = res.data.data[0];
      });
    },
  },
};
</script>
<style scoped>
.shop {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.header-nav {
  position: relative;
}
.nav_bg img {
  width: 100%;
  height: 26.666667vw;
}
.nav_back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26.666667vw;
  background: rgba(0, 0, 0, 0.5);
}
.nav_back i {
  color: #fff;
  font-size: 1.3rem;
  margin-left: 1.333333vw;
  margin-top: 1.333333vw;
}
.shop_image {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -10vw;
  margin-top: 11vw;
}
.shop_image img {
  width: 20vw;
  height: 20vw;
  border-radius: 0.8vw;
}

.index-rst {
  padding: 5vw 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  box-shadow: inset 0 -0.666667vw 0.666667vw hsla;
}
.index-rst .rst-name {
  flex: 1;
  width: 72vw;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  padding-right: 2.666667vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rst-name span {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index-rst .rst-order {
  white-space: nowrap;
  height: 3.2vw;
  margin-top: 1.733333vw;
  color: #666;
  text-align: center;
  font-size: 0.6rem;
}
.rst-order span {
  margin: 0 3px;
}
.index-rst .rst-promotion {
  width: 80vw;
  font-size: 0.6rem;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 2.266667vw auto 2.666667vw;
  padding: 0;
  white-space: nowrap;
}
</style>